<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- html <head>标签部分  -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="/css/core.css" type="text/css"/>
    <script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#beginDate,#endDate").click(function () {
                WdatePicker();
            });

            $("#pagination").twbsPagination({
                        totalPages: ${pageInfo.pages} || 1,
                    startPage
            :${qo.currentPage},
            visiblePages : 5,
                    first:"首页",
                    prev:"上一页",
                    next:"下一页",
                    last:"最后一页",
                    onPageClick:
            function (event, page) {
                $("#currentPage").val(page);
                $("#searchForm").submit();
            }
        })
            ;
            $("#query").click(function () {
                $("#currentPage").val(1);
                $("#searchForm").submit();
            })

        });
    </script>
</head>
<body>
<div class="">
    <div class="row">
        <div class="col-md-12" style="background-color:#31b1ff; padding-top: 7px" align="center"><font
                size="4">查看订单</font></div>
    </div>
    <div>
        <!-- 提交分页的表单 -->
        <form id="searchForm" method="post" action="/orderBill_list">

            <input type="hidden" id="currentPage" name="currentPage" value=""/>
        <#--<div class="form-group" style="width:70%;padding-bottom: 3px;padding-top: 3px" align="left">
            <input type="text" class="form-control" id="keyword" name="keyword"
                   placeholder="客户姓名" style="background-color: #eefbbb" value="${(qo.keyword!'')}">
            <button id="query" class="btn btn-success">查询</button>
        </div>-->
            <div class="form-group">

            </div>
        </form>

        <div class="col-md-12">
        <#if (pageInfo.list?size>0)>
            <h4>尊敬的客户,您订单详情如下:</h4>
        <p>
            <#list pageInfo.list as bill>
                <li style="padding-left: 8px">
                    <div style="padding-bottom: 5px">客 户 姓 名 : ${bill.username}</div>
                </li>
                <li style="padding-left: 8px">
                    <div style="padding-bottom: 5px">订 单 编 号 : ${bill.orderBillNum!""}</div>
                </li>
                <li style="padding-left: 8px">
                    <div style="padding-bottom: 5px">服 务 时 间 : ${bill.mealImplementTime?string('yyyy-MM-dd')}</div>
                </li>
                <li style="padding-left: 8px">
                    <div style="padding-bottom: 5px">服 务 地 点 : ${bill.mealImplementAddress!""}</div>
                </li>
                <li style="padding-left: 8px">
                    <div style="padding-bottom: 5px">套 餐 类 型 : ${bill.mealTypeDisplay!""}</div>
                </li>
                <li style="padding-left: 8px">
                    <div style="padding-bottom: 5px">套餐收费(元): ${bill.fee?string.currency}</div>
                </li>
                <li style="padding-left: 8px">
                    <div style="padding-bottom: 5px">您 的 留 言 : ${bill.remark!""}</div>
                </li>
                <hr style="color:#00d7ff">
            </#list>

            <div align="center">
                <button type="button" class="btn btn-info" id="charge">订单支付</button>
            </div>


            <script type="text/javascript">
                $("#charge").click(function () {
                    $.messager.confirm("温馨提示", "您即将支付, 请确保账户余额充足", function () {
                        var count = 0;
                        var timer = window.setInterval(function () {
                            count++;
                            $("#charge").html("正在支付中...." + (5 - count));
                            $("#charge").attr('disabled', true);
                            if (count == 5) {
                                window.clearInterval(timer);
                                $.messager.popup("订单支付成功!");
                                $("#charge").html("支付完成");
                                //------------------------------------------------
                                var count1 = 0;
                                var timer1 = window.setInterval(function () {
                                    count1++;
                                    $("#charge").html((5 - count1) + "秒后跳转到首页");

                                    $("#charge").attr('disabled', true);
                                    if (count1 == 5) {
                                        window.clearInterval(timer1)
                                        window.location.href = "index";
                                    }
                                }, 1000)
                                //------------------------------------------------
                            }
                        }, 1000)
                    });
                });
            </script>
        </p>
        <#else>
            <h4>对不起,您的订单走丢啦...</h4>
            <div align="center">
                <a href="/orderBill"><img border="0" style="padding-top: 2px" src="/image/orderbill/missing.png"></a>
            </div>
        </#if>
        </div>
    </div>
</div>

</div>

</body>
</html>